<script setup>
import router from "../../../router/index.js";
import MyNav from "../../../components/MyNav.vue";
import MyForm from "../../../components/MyForm.vue";
import {RULE} from "../../../const/index.js";
import {reactive, ref} from "vue";
import {updateApi} from "../../../api/axios.js";

// 获取当前角色记录：修改父角色不传递 pid 和 url 这两个参数
let role = JSON.parse(sessionStorage.getItem('row'));
delete role['pid'];
delete role['url'];

/* ==================== 页面常量 ==================== */

// 路径导航
const navItems = [
  {icon: 'User', label: '用户管理'},
  {icon: 'Flag', label: '角色列表', url: '/Role'},
  {icon: 'Edit', label: '修改角色'},
];

/* ==================== 修改表单 ==================== */

// 表单项 + 表单值 + 表单规则
let items = ref([
  {label: '标题', prop: 'title', required: true, span: 12},
  {label: '排序', prop: 'idx', type: 'number', required: true, span: 12},
  {label: '图标', prop: 'icon', required: true, type: 'icon'},
  {label: '描述', prop: 'info', required: true, type: 'textarea'},
]);
let data = reactive(role);
let rules = {title: RULE.TITLE, info: RULE.INFO, icon: RULE.MENU_ICON};

/**
 * 修改成功后调用
 *
 * 1. 路由到 Role 页面
 */
function updateSuccess() {
  router.push('/Role');
}

</script>

<template>
  <my-nav :items="navItems"/>
  <el-divider/>
  <el-card className="role-update-card" header="修改角色信息">
    <my-form type="update"
             :items="items"
             :rules="rules"
             :args="{module: 'role'}"
             :api="updateApi"
             :params="data"
             :callback="updateSuccess"/>
  </el-card>
</template>

<style scoped lang="scss">
.role-update-card {
  width: 70%; // 宽度
  margin: 20px auto 0; // 外边距
}
</style>